<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript" src="../jqtool/jquery.tools.min.js">
        </script>
        <style type="text/css">
            body {
                padding: 50px 80px;
                font-family: "Lucida Grande", "bitstream vera sans", "trebuchet ms", sans-serif, verdana;
            }
            
            /* get rid of those system borders being generated for A tags */
            a:active {
                outline: none;
            }
            
            a:focus {
                -moz-outline-style: none;
            }
        </style>
        <style>
            /* root element for single scroll */ .scroll {
                position: relative;
                overflow: hidden;
                width: 348px;
                height: 266px;
                float: left;
                margin-left: 2px;
                margin-bottom: 2px;
            }
            
            /* root element for the scroll pics */ .scroll .pics {
                width: 20000em;
                position: absolute;
                clear: both;
            }
            
            /* single scroll item */ .pics div {
                float: left;
                cursor: pointer;
                width: 400px !important;
                height: 300px;
                margin: 0px;
            }
            
            /* possible settings for the active scroll */ .scroll.active {
            }
        </style>
        <style type="text/css">
        </style>
        <script type="text/javascript">
        </script>
    </head>
    <body>
        <!-- scroll #1 -->
        <div class="scroll">
            <div class="pics">
                <div style="background-image:url(http://farm1.static.flickr.com/114/299183878_4feac12b04.jpg)">
                </div>
                <div style="background-image:url(http://farm1.static.flickr.com/200/507751258_5f13e3d802.jpg)">
                </div>
                <div style="background-image:url(http://farm1.static.flickr.com/30/37446217_14bc95631a.jpg)">
                </div>
            </div>
        </div>
        <!-- scroll #4 -->
        <div class="scroll">
            <div class="pics">
                <div style="background-image:url(http://farm1.static.flickr.com/143/321464099_a7cfcb95cf.jpg)">
                </div>
                <div style="background-image:url(http://farm1.static.flickr.com/164/399223606_b875ddf797.jpg)">
                </div>
                <div style="background-image:url(http://farm4.static.flickr.com/3651/3445879840_7ca4b491e9.jpg)">
                </div>
            </div>
        </div>
        <!-- scroll #3 -->
        <div class="scroll">
            <div class="pics">
                <div style="background-image:url(http://farm4.static.flickr.com/3155/2636513939_cd75b704ec.jpg)">
                </div>
                <div style="background-image:url(http://farm1.static.flickr.com/40/122343298_22333fb8e3.jpg)">
                </div>
                <div style="background-image:url(http://farm4.static.flickr.com/3105/2618870872_cf22d3cdb1.jpg)">
                </div>
            </div>
        </div>
        <!-- scroll #4 -->
        <div class="scroll">
            <div class="pics">
                <div style="background-image:url(http://farm4.static.flickr.com/153/399232237_6928a527c1.jpg)">
                </div>
                <div style="background-image:url(http://farm1.static.flickr.com/50/117346182_1fded507fa.jpg)">
                </div>
                <div style="background-image:url(http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75.jpg)">
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function(){
                // enable circular scrollables with a click handler
                $(".scroll").scrollable({
                    circular: true
                }).click(function(){
                    $(this).data("scrollable").next();
                });
            });
        </script>
    </body>
</html>
